<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html @touchmove.prevent>
<head>
    <meta charset="utf-8">
    <!-- 360浏览器极速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>对战系统</title>
    <%@ include file="/pages/common/head.jsp" %>
    <link rel="stylesheet" href="static/external/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/play.css">
    <style>
        body {
            background: url("${pageContext.request.contextPath}/static/images/bkgd.jpg");
        }
    </style>
</head>
<body>
<div id="container">
    <div id="topInfo">
        <a id="status" href="userServlet?action=enterCenter&name=${requestScope.user.name}"
           target="_blank"></a><br>
        <span id="onlineCount"></span><br>
    </div>
    <div id="panel">
        <div id="left_panel">
            <table id="freeList"></table>
            <div class="game-panel">
                <br><br>
                <span id="turn"></span><br>
                <div id="chessColor"></div>
                <br>
                <button class="btn btn-primary" onclick="sendUndo()">请求悔棋</button>
                <br>
                <button class="btn btn-primary" onclick="seeLastChess()">显示位置</button>
                <br><br>
                <button class="btn btn-primary" onclick="leaveGame()">退出对局</button>
            </div>
            <div class="watch-panel">
                <span class="roomId"></span>&nbsp;
                <span class="watchCount">观战人数: 0</span><br><br>
                <button class="btn btn-primary" onclick="seeLastChess()">显示位置</button>
                <br><br>
                <button class="btn btn-primary" onclick="leaveWatch()">退出观战</button>
            </div>
        </div>
        <div id="mid_panel">
            <br>
            <button id="match_btn" class="btn btn-success" onclick="startMatch()">匹配</button>
            <canvas id="boardCanvas" class="gameCanvas" width="450px" height="450px"></canvas>
            <canvas id="markCanvas" class="gameCanvas" width="450px" height="450px"></canvas>
            <canvas id="chessCanvas" class="gameCanvas" width="450px" height="450px"></canvas>
        </div>
        <div id="right_panel">
            <table id="roomList"></table>
            <div class="game-panel">
                <span class="roomId"></span>&nbsp;
                <span class="watchCount">观战人数: 0</span><br>
                <span id="wait"></span>
            </div>
        </div>
    </div>
    <div id="changeBoard">
        <button class="btn btn-primary" onclick="fixBoard()">错误修复</button>
        <button class="btn btn-primary" onclick="updateBoard()">刷新棋盘</button>
        <button class="btn btn-primary" onclick="switchBoard()">切换棋盘</button>
    </div>
</div>
<script src="static/js/draw.js"></script>
<script src="static/js/handleMassage.js"></script>
<script src="static/js/sendMessage.js"></script>
<script type="text/javascript">
    let websocket = null;
    let boardContext = null;
    let chessContext = null;
    let markContext = null;

    function updateBoard() {
        $.getJSON("userServlet?action=getBoard", {
            id: ${requestScope.user.id}
        }, function (boardName) {
            setBoard(boardName);
        });
    }

    function switchBoard() {
        $.getJSON("userServlet?action=switchBoard", {
            id: ${requestScope.user.id}
        }, function (boardName) {
            setBoard(boardName);
        });
    }

    function setBoard(name) {
        $('#boardCanvas').css('background-image', 'url("${pageContext.request.contextPath}/static/board_img/'
            + name + '.jpg")')
    }

    $(function () {
        $('#chessCanvas').click(function (e) {
            const x = e.offsetX;
            const y = e.offsetY;
            const i = Math.floor(x / 30);
            const j = Math.floor(y / 30);
            playChess(i, j);
        });
        updateBoard();
    });

    window.onload = function () {
        if ('WebSocket' in window) {
            websocket = new WebSocket('ws://${pageContext.request.serverName}'
                + ':${pageContext.request.serverPort}'
                + '${pageContext.request.contextPath}'
                + '/play/${requestScope.user.name}');
            websocket.onerror = function () {
                $('#status').text("出错了")
            };
            websocket.onopen = function () {
                $('#status').text("${requestScope.user.name}  在线...")
            };
            websocket.onclose = function () {
                $('#status').text("掉线...")
            };
            websocket.onmessage = function (msgInfo) {
                const msg = JSON.parse(msgInfo.data);
                Reflect.get(window, msg.action)(msg.data);
            };
            window.onbeforeunload = function () {
                websocket.close();
            };
        } else {
            alert('Not support websocket');
        }
        boardContext = $('#boardCanvas')[0].getContext('2d');
        chessContext = $('#chessCanvas')[0].getContext('2d');
        markContext = $('#markCanvas')[0].getContext('2d');
        // 画棋盘
        drawChessBoard();
    };
</script>
</body>
</html>
